React Concurrent Features: 향상된 사용자 경험을 위한 useTransition 및 useDeferredValue 마스터하기

React 18은 애플리케이션의 반응성과 인지된 성능을 향상시키기 위해 설계된 강력한 도구 세트인 동시성 기능을 도입했습니다. 이 중에서도 useTransition과 useDeferredValue는 상태 업데이트를 관리하고 렌더링 우선 순위를 지정하는 데 필수적인 훅으로 돋보입니다. 이 가이드는 이러한 기능에 대한 포괄적인 탐구를 제공하며, 이를 통해 React 애플리케이션을 더욱 부드럽고 사용자 친화적인 경험으로 변화시킬 수 있는 방법을 보여줍니다.

React의 동시성 이해

useTransition과 useDeferredValue의 구체적인 내용으로 들어가기 전에 React의 동시성 개념을 파악하는 것이 중요합니다. 동시성을 통해 React는 렌더링 작업을 중단, 일시 중지, 재개 또는 포기할 수도 있습니다. 즉, React는 덜 긴급한 업데이트 (예: 큰 목록 업데이트)보다 중요한 업데이트 (예: 입력 필드에 입력)의 우선 순위를 지정할 수 있습니다. 이전에는 React가 동기식, 차단 방식으로 작동했습니다. React가 업데이트를 시작하면 다른 작업을 수행하기 전에 완료해야 했습니다. 이로 인해 특히 복잡한 상태 업데이트 중에 지연과 느린 사용자 인터페이스가 발생할 수 있습니다.

동시성은 React가 여러 업데이트를 동시에 처리하여 병렬 처리의 환상을 효과적으로 만들어 냄으로써 이를 근본적으로 변경합니다. 이는 실제 멀티 스레딩 없이 정교한 스케줄링 알고리즘을 사용하여 달성됩니다.

useTransition 소개: 업데이트를 비차단으로 표시

useTransition 훅을 사용하면 특정 상태 업데이트를 transitions로 지정할 수 있습니다. Transitions는 React가 우선 순위가 높은 업데이트가 대기 중인 경우 중단하거나 지연할 수 있는 긴급하지 않은 업데이트입니다. 이렇게 하면 복잡한 작업 중 UI가 멈추거나 응답하지 않는 느낌이 들지 않습니다.

useTransition의 기본 사용법

useTransition 훅은 두 개의 요소를 포함하는 배열을 반환합니다.

• isPending: transition이 현재 진행 중인지 여부를 나타내는 부울 값입니다.
• startTransition: transition으로 표시하려는 상태 업데이트를 래핑하는 함수입니다.

간단한 예는 다음과 같습니다.

import { useState, useTransition } from 'react';

function MyComponent() {
  const [isPending, startTransition] = useTransition();
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    startTransition(() => {
      setValue(e.target.value);
    });
  };

  return (
    

      
      {isPending ? 
Updating...
 : 
Value: {value}
}
    
  );
}

이 예에서 setValue 함수는 startTransition으로 래핑됩니다. 이는 React에게 value 상태를 업데이트하는 것이 transition임을 알려줍니다. 업데이트가 진행되는 동안 isPending은 true가 되어 로딩 표시기 또는 기타 시각적 피드백을 표시할 수 있습니다.

실용적인 예: 대규모 데이터 세트 필터링

사용자 입력을 기반으로 대규모 데이터 세트를 필터링해야 하는 시나리오를 고려하십시오. useTransition이 없으면 각 키 입력이 전체 목록의 다시 렌더링을 트리거하여 눈에 띄는 지연과 열악한 사용자 경험을 초래할 수 있습니다.

import { useState, useTransition, useMemo } from 'react';

const data = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);

function FilterableList() {
  const [filterText, setFilterText] = useState('');
  const [isPending, startTransition] = useTransition();

  const filteredData = useMemo(() => {
    return data.filter(item => item.toLowerCase().includes(filterText.toLowerCase()));
  }, [filterText]);

  const handleChange = (e) => {
    startTransition(() => {
      setFilterText(e.target.value);
    });
  };

  return (
    

      
      {isPending && 
Filtering...
}
      

        {filteredData.map(item => (
          
{item}
        ))}
      
    
  );
}

이 개선된 예에서 useTransition은 필터링 프로세스가 진행되는 동안 UI가 응답성을 유지하도록 보장합니다. isPending 상태를 사용하면 "필터링 중..." 메시지를 표시하여 사용자에게 시각적 피드백을 제공할 수 있습니다. useMemo는 필터링 프로세스 자체를 최적화하여 불필요한 다시 계산을 방지하는 데 사용됩니다.

필터링에 대한 국제적 고려 사항

국제 데이터를 처리 할 때는 필터링 로직이 로케일을 인식하는지 확인하십시오. 예를 들어, 언어마다 대소문자를 구분하지 않는 비교에 대한 규칙이 다릅니다. 이러한 차이점을 올바르게 처리하려면 적절한 로케일 설정과 함께 toLocaleLowerCase() 및 toLocaleUpperCase()와 같은 메서드를 사용하는 것이 좋습니다. 악센트 부호 또는 발음 구별 부호와 관련된 더 복잡한 시나리오의 경우 국제화 (i18n)를 위해 특별히 설계된 라이브러리가 필요할 수 있습니다.

useDeferredValue 소개: 덜 중요한 업데이트 연기

useDeferredValue 훅은 값의 렌더링을 연기하여 업데이트의 우선 순위를 지정하는 또 다른 방법을 제공합니다. React가 우선 순위가 높은 작업을 수행 할 필요가 없을 때만 업데이트되는 값의 지연된 버전을 만들 수 있습니다. 이는 값의 업데이트가 UI에 즉시 반영 할 필요가없는 비용이 많이 드는 다시 렌더링을 트리거 할 때 특히 유용합니다.

useDeferredValue의 기본 사용법

useDeferredValue 훅은 값을 입력으로 사용하고 해당 값의 지연된 버전을 반환합니다. React는 지연된 값이 결국 최신 값과 일치하도록 보장하지만 활동이 많은 기간 동안 지연 될 수 있습니다.

import { useState, useDeferredValue } from 'react';

function MyComponent() {
  const [value, setValue] = useState('');
  const deferredValue = useDeferredValue(value);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    

      
      
Value: {deferredValue}
    
  );
}

이 예에서 deferredValue는 value 상태의 지연된 버전입니다. value에 대한 변경 사항은 결국 deferredValue에 반영되지만 React는 다른 작업으로 바쁜 경우 업데이트를 지연 할 수 있습니다.

실용적인 예: 지연된 결과가 있는 자동 완성

사용자 입력을 기반으로 제안 목록을 표시하는 자동 완성 기능을 고려하십시오. 특히 목록이 크거나 제안이 원격 서버에서 가져온 경우 모든 키 입력에서 제안 목록을 업데이트하는 데 계산 비용이 많이 들 수 있습니다. useDeferredValue를 사용하면 입력 필드 자체 (즉각적인 사용자 피드백) 업데이트의 우선 순위를 지정하면서 제안 목록 업데이트를 연기 할 수 있습니다.

import { useState, useDeferredValue, useEffect } from 'react';

function Autocomplete() {
  const [inputValue, setInputValue] = useState('');
  const deferredInputValue = useDeferredValue(inputValue);
  const [suggestions, setSuggestions] = useState([]);

  useEffect(() => {
    // Simulate fetching suggestions from an API
    const fetchSuggestions = async () => {
      // Replace with your actual API call
      await new Promise(resolve => setTimeout(resolve, 200)); // Simulate network latency
      const mockSuggestions = Array.from({ length: 5 }, (_, i) => `Suggestion for ${deferredInputValue} ${i + 1}`);
      setSuggestions(mockSuggestions);
    };

    fetchSuggestions();
  }, [deferredInputValue]);

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    

      
      

        {suggestions.map(suggestion => (
          
{suggestion}
        ))}
      
    
  );
}

이 예에서 useEffect 훅은 deferredInputValue를 기반으로 제안을 가져옵니다. 이를 통해 React가 입력 필드 업데이트와 같은 우선 순위가 높은 업데이트 처리를 완료 한 후에만 제안 목록이 업데이트되도록 보장합니다. 제안 목록이 업데이트되는 데 시간이 걸리더라도 사용자는 부드러운 입력 경험을 경험하게됩니다.

자동 완성에 대한 글로벌 고려 사항

자동 완성 기능은 전 세계 사용자를 염두에두고 설계해야합니다. 주요 고려 사항은 다음과 같습니다.

• 언어 지원: 자동 완성이 여러 언어와 문자 세트를 지원하는지 확인하십시오. 유니 코드를 인식하는 문자열 조작 함수를 사용하는 것이 좋습니다.
• 입력 방법 편집기 (IME): 일부 지역의 사용자는 표준 키보드에서 직접 사용할 수없는 문자를 입력하기 위해 IME에 의존하므로 IME에서 입력을 올바르게 처리하십시오.
• 오른쪽에서 왼쪽 (RTL) 언어: UI 요소와 텍스트 방향을 올바르게 미러링하여 아랍어 및 히브리어와 같은 RTL 언어를 지원합니다.
• 네트워크 대기 시간: 지역 위치가 다른 사용자는 다양한 수준의 네트워크 대기 시간을 경험하게됩니다. API 호출 및 데이터 전송을 최적화하여 지연을 최소화하고 명확한 로딩 표시기를 제공하십시오. CDN (콘텐츠 전송 네트워크)을 사용하여 정적 자산을 사용자에게 더 가깝게 캐시하는 것이 좋습니다.
• 문화적 감수성: 사용자의 입력을 기반으로 불쾌하거나 부적절한 용어를 제안하지 마십시오. 긍정적 인 사용자 경험을 보장하기 위해 콘텐츠 필터링 및 조정 메커니즘을 구현하십시오.

useTransition 및 useDeferredValue 결합

useTransition과 useDeferredValue를 함께 사용하면 렌더링 우선 순위를보다 세밀하게 제어 할 수 있습니다. 예를 들어 useTransition을 사용하여 상태 업데이트를 긴급하지 않은 것으로 표시 한 다음 useDeferredValue를 사용하여 해당 상태에 의존하는 특정 구성 요소의 렌더링을 연기 할 수 있습니다.

여러 개의 상호 연결된 구성 요소가있는 복잡한 대시 보드를 상상해보십시오. 사용자가 필터를 변경하면 표시되는 데이터를 업데이트 (transition)하고 렌더링하는 데 시간이 오래 걸리는 차트 구성 요소의 다시 렌더링을 연기하려고합니다. 이렇게하면 대시 보드의 다른 부분이 빠르게 업데이트되고 차트가 점진적으로 따라 잡을 수 있습니다.

useTransition 및 useDeferredValue 사용에 대한 모범 사례

• 성능 병목 현상 식별: React DevTools를 사용하여 성능 문제를 일으키는 구성 요소 또는 상태 업데이트를 식별하십시오.
• 사용자 상호 작용 우선 순위 지정: 입력 또는 클릭과 같은 직접적인 사용자 상호 작용이 항상 우선 순위가 지정되도록하십시오.
• 시각적 피드백 제공: useTransition의 isPending 상태를 사용하여 업데이트가 진행 중일 때 사용자에게 시각적 피드백을 제공하십시오.
• 측정 및 모니터링: useTransition과 useDeferredValue가 사용자 경험을 효과적으로 개선하고 있는지 확인하기 위해 애플리케이션의 성능을 지속적으로 모니터링하십시오.
• 과용하지 마십시오: 필요한 경우에만 이러한 훅을 사용하십시오. 과용하면 코드가 더 복잡해지고 추론하기가 더 어려워 질 수 있습니다.
• 애플리케이션 프로파일링: React 프로파일러를 사용하여 이러한 훅이 애플리케이션 성능에 미치는 영향을 이해하십시오. 이렇게하면 사용량을 미세 조정하고 추가 최적화를위한 잠재적 영역을 식별하는 데 도움이됩니다.

결론

useTransition과 useDeferredValue는 React 애플리케이션의 성능과 응답성을 향상시키는 강력한 도구입니다. 이러한 훅을 효과적으로 사용하는 방법을 이해함으로써 복잡한 상태 업데이트와 대규모 데이터 세트를 처리 할 때도 더욱 부드럽고 사용자 친화적 인 경험을 만들 수 있습니다. 사용자 상호 작용의 우선 순위를 지정하고 시각적 피드백을 제공하며 애플리케이션의 성능을 지속적으로 모니터링하는 것을 잊지 마십시오. 이러한 동시성 기능을 수용함으로써 React 개발 기술을 한 단계 끌어 올리고 전 세계 시청자를 위해 진정으로 뛰어난 웹 애플리케이션을 구축 할 수 있습니다.